<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
</template>

<script>
import E from "wangeditor";
import {baseUpPUrl,pictureUrl} from '@/utils/filter'
export default {
  name: "wangeditor",
  props: ["catchData"],
  data() {
    return {
      editor: null,
      editorContent: ""
    };
  },
  methods: {
    // 图片上传接口
    upload(formData) {

      return {
        imgUrl: ""
      };
    },
    provideDatas() {
      this.$emit("catchData", this.editorContent);
    }
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
      "redo" // 重复
    ];
    this.editor.customConfig.zIndex = 11
    this.editor.customConfig.uploadImgServer = baseUpPUrl("")
    this.editor.customConfig.uploadImgMaxLength = 5; /* 限制一次最多上传 5 张图片 */
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    this.editor.customConfig.uploadFileName = 'file'
    /* 将图片大小限制为 3M 默认为5M / 
                   /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
    // this.editor.customConfig.customUploadImg = async (files, insert) => {
    //     /* files 是 input 中选中的文件列表 */
    //     let formData = new FormData();
    //     formData.append("file", files);
    //     let data = await this.upload(formData);
    //     /* upload方法是后台提供的上传图片的接口 */
    //     /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/
    //     insert(data.imgUrl);
    //     };
        this.editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
        },
        success: function (xhr, editor, result) {
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        customInsert: function (insertImg, result, editor) {
            var url = result.result.originalUrl
            insertImg(pictureUrl(url))
        }
    },
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
      /* html 即变化之后的内容 */
      this.editorContent = html;
    };
    this.editor.create(); // 创建富文本实例
    this.editor.txt.html(this.catchData);
  }
};
</script>

<style lang="scss" scoped>
.fullscreen-editor {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
    background-color: white;
    z-index: 9999;
}
#wangeditor {
  width: 100%;
  height: 100%;
}
</style>